<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/music.css"/>
		<title></title>
	</head>

	<body>
		<div class="web">
			<div class="musicbutton" id="ic">
				<i class="iconfont icon-yinle icon">
					<audio src="../media/kfc.mp3" class="music" autoplay loop id="music"></audio>
				</i>
			</div>
			<div id="container"></div>
			<p class="one">赶紧前往张裕白兰地线下兑换点</p>
			<p>领取婚宴定制囍酒套装限量好礼！</p>
			<div class="home">
				<a class="iconfont icon-fangzi" href="index.html"></a>
			</div>
		</div>
	</body>
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/music.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/fontSize.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://webapi.amap.com/maps?v=1.3&amp;key=e77add6bb39a1436cf4f22ebaf34ad7f&callback="></script>
		<script>
			/******************获取json****************/
			var xmlhttp;
			if(window.XMLHttpRequest) {
				//IE7 + , Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp = new XMLHttpRequest();
			} else {
				//IE6, IE5 浏览器执行代码
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//var stores;
			xmlhttp.open('GET', '../js/json/data.json');
			xmlhttp.send();
			xmlhttp.addEventListener('readystatechange', function() {
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					stores = JSON.parse(xmlhttp.responseText);
					return stores
				}
			}) //js获取json

			//			var jd;
			//			var wd;
			//			var address;
			//			var phone;
			//			var shop_name;
			//			$.ajax({
			//				type: "get",
			//				url: "../js/data.json",
			//				async: true,
			//				success: function(data) {
			//					$.each(data, function(i, item) {
			//						jd = item['JD'];
			//						wd = item['WD'];
			//						address = item['address'];
			//						phone = item['mobile'];
			//						shop_name = item['shop_name'];
			//					});
			//				}
			//			});//jq获取json

			/******************初始化地图*****************************/
			var map = new AMap.Map('container', {
				resizeEnable: true,
				zoom: 10,
			})

			/*************获取自己的坐标***********/

			var geolocation;
			map.plugin('AMap.Geolocation', function() {
				geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：无穷大
					buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					buttonPosition: 'RB'
				});
				map.addControl(geolocation);
				geolocation.getCurrentPosition();
				AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
				AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
			});

			/*********解析定位结果**************/

			function onComplete(data) {
				new AMap.Marker({
					map: map,
					position: [data.position.getLng(), data.position.getLat()]
				});
				map.setFitView();

				//遍历得到最近商店坐标

				stores.sort(function(a, b) {
					var distance_a = Math.pow((a.JD - data.position.getLng()), 2) + Math.pow((a.WD - data.position.getLat()), 2);
					var distance_b = Math.pow((b.JD - data.position.getLng()), 2) + Math.pow((b.WD - data.position.getLat()), 2);
					return distance_a - distance_b
				});

				//创建距离最近的坐标的marker(点标注)
				var marker = new AMap.Marker({
					position: [stores[0].JD, stores[0].WD]
				});
				marker.setMap(map);
				marker.setMap(map);
				marker.on('click', function(e) {
					infowindow.open(map, e.target.getPosition());
				})
				AMap.plugin('AMap.AdvancedInfoWindow', function() {
					infowindow = new AMap.AdvancedInfoWindow({
						content: '<a class="info-title" style="font-size:12px" href="http://www.baidu.com">' + stores[0].shop_name + '</a><div class="info-content" style="font-size:12px">' +
							'地址:' + stores[0].address + '<br>' + '电话:' + stores[0].mobile +
							'<a target="_blank" href = "https://mobile.amap.com/"></a></div>',
						offset: new AMap.Pixel(0, -40)
					});
					infowindow.open(map, [stores[0].JD, stores[0].WD]);
				})
				AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
					var toolBar = new AMap.ToolBar();
					var scale = new AMap.Scale();
					map.addControl(toolBar);
					map.addControl(scale);
				});
				map.setFitView();

			};
			/**********解析定位错误信息**************/
			function onError(data) {
				alert('定位失败');
			};
		</script>
		

</html>